import { useEffect, useState } from 'react';
import { Button, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import axios from '../../api/request';

function List() {
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }
    const [data, setData] = useState([])
    const [page,setPage]=useState(1)
    const [pageSize,setPageSize]=useState(10)
    const [keyword,setKeyword]=useState('')
    const [count,setCount]=useState(0)
    const listData = async () => {
        const res = await axios.get('/article/list',{params:{page:page,pageSize:pageSize,keyword:keyword}})
        setData(res.data.rows)
        setCount(res.data.count)
    }
    useEffect(() => {
        listData()
    }, [page,pageSize,keyword])
    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '文章内容',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: '按钮',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button>增加</Button>
                    <Button>删除</Button>
                </Space>
            ),
        },
    ];
    const onChange=(page,pageSize)=>{
        setPage(page),
        setPageSize(pageSize)
    }
    return (
        <div>
            <Table<DataType> columns={columns} dataSource={data} />
        </div>
    );
}

export default List;
